<template>
  <div class="nav">
    <a href="/pages/rule/main" v-if="rule">规则</a>
    <a href="/pages/game/main" v-if="game">博饼</a>
    <a href="/pages/leaderboard/main" v-if="leaderboard">排行</a>
    <a href="/pages/prize/main" v-if="prize">兑奖</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      leaderboard: true,
      game: true,
      rule: true,
      prize: true
    }
  },
  props: ['displayCondition'],
  methods: {
    displayShow () {
      if (this.displayCondition == 'leaderboard') {
        return this.leaderboard = false
      } else if (this.displayCondition == 'game') {
        return this.game = false
      } else if (this.displayCondition == 'rule') {
        return this.rule = false
      } else {
        return this.prize = false
      }
    }
  },
  mounted () {
    this.displayShow()
  }
}
</script>

<style scoped>
.nav {
  width: 100%;
  height: 110rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  line-height: 110rpx;
  background-color: #C03;
}
.nav a {
  width: 150rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #FFFF33;
  text-align: center;
  border-radius: 15px;
  color: #000;
}
</style>
